<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <div>
      <div style="display: inline-block">
        <el-button icon="el-icon-back" size="small" type="text" @click="goBack">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;margin-left:10px">
          <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">导出知识</span>
        </div>
      </div>
      <div style="border-bottom: solid 1px #C9C9C9;"></div>
    </div>
    <el-row class="row">
      <el-col :span="3">
        <el-button size="small" type="primary" @click="confirm()">确定导出</el-button>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="5" class="col">
        <el-row>
          <el-col :span="8">
            <div class="label">知识包名称：</div>
          </el-col>
          <el-col :span="16">
            <el-input v-model="bagName" size="small"></el-input>
          </el-col>
        </el-row>
      </el-col>
      <el-col :offset="1" :span="5" class="col">
        <el-row>
          <el-col :span="7">
            <div class="label">导出原因：</div>
          </el-col>
          <el-col :span="17">
            <el-input v-model="cause" size="small"></el-input>
          </el-col>
        </el-row>
      </el-col>
      <el-col :offset="1" :span="5">
        <el-row>
          <el-col :span="7">
            <div class="label">导出类型：</div>
          </el-col>
          <el-col :span="17">
            <el-select v-model="type" placeholder="请选择" size="small" @change="handleSelectionChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                size="small">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :offset="1" :span="5">
        <el-row>
          <el-col :span="12">
            <div class="label">是否包含动态字段：</div>
          </el-col>
          <el-col :span="12">
            <div style="line-height: 30px;">
              <el-switch v-model="isIncludeDynamicField"
                         active-color="#2db7a0"
                         active-text="是"
                         inactive-color="#c9c9c9"
                         :disabled="switchIsDisabled"
                         inactive-text="否"></el-switch>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="4">
        <el-checkbox v-model="checkAll"
                     :indeterminate="isIndeterminate"
                     @change="handleCheckAllChange">全选
        </el-checkbox>
      </el-col>
    </el-row>
    <el-row class="row">
      <div style="border-bottom: solid 1px #C9C9C9;"></div>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <el-checkbox-group v-model="nameSelection" @change="handleCheckedFieldsChange">
          <el-checkbox v-for="(data, index) in nameTableData" :key="index" :label="data.name"
                       style="width: 200px; margin-bottom: 20px;"></el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Label from "../../calculator/exportModel/Label";

export default {
  name: "exportKnowledge",
  components: {Label},
  data() {
    return {
      bagName: '',
      ReleaseTableData: '',
      cause: '',
      nameTableData: [],
      nameSelection: [],
      multiplePages: true,
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      options: [{
        value: 1,
        label: 'EXCEL'
      }, {
        value: 2,
        label: 'XML'
      }],
      type: '',
      isIndeterminate: false,
      checkAll: false,
      isIncludeDynamicField: false,
      switchIsDisabled: true,
      allStatus: ''
    }
  },
  methods: {
    handleSelectionChange(val) {
      if (val === 1) {
        this.isIncludeDynamicField = false
        this.switchIsDisabled = true
      } else if (val === 2) {
        this.switchIsDisabled = false
      }
    },
    cancel: function () {
      this.$router.go(-1)
    },
    goBack: function () {
      this.$router.go(-1)
    },
    confirm: function () {
      if (this.bagName === '' || this.bagName === null) {
        this.$message.warning("请填写知识包名称")
        return;
      }
      if (this.cause === '' || this.cause === null) {
        this.$message.warning("请填写原因")
        return;
      }
      if (this.nameSelection.length < 0) {
        this.$message.warning("请选择字段")
        return;
      }
      if (this.type === "") {
        this.$message.warning("请选择导出类型")
        return
      }

      let param = new URLSearchParams();
      param.append("name", this.bagName)
      param.append("id", this.$route.query.id)
      param.append("cause", this.cause)
      if (this.allStatus === 'all') {
        param.append("currentPage", 0),
          param.append("pageNum", 10),
          param.append("all", this.$route.query.radio1),
          param.append("updateTime", this.$route.query.updateTime),
          param.append("classify", JSON.stringify(this.$route.query.classify)),
          param.append("version", this.$route.query.version),
          param.append("editor", this.$route.query.editor),
          param.append("auditor", this.$route.query.auditor),
          param.append("knowledgeName", this.$route.query.name),
          param.append("queryStatus", 'queryList'),
          param.append("drugInfoLibCompany", this.$route.query.drugInfoLibCompany)
      } else {
        param.append("select", this.$route.query.select)
      }
      param.append("nameSelection", JSON.stringify(this.nameSelection))
      param.append("type", this.type)
      param.append("includeDynamicField", this.isIncludeDynamicField)
      this.axios.post('/pmph/action/knowledgeLib/addExportKnowledge', param).then(() => {
        this.$router.go(-1)
      })
    },
    handleCheckAllChange(checkAll) {
      this.nameSelection = []
      if (checkAll) {
        for (let i = 0; i < this.nameTableData.length; i++) {
          this.nameSelection.push(this.nameTableData[i].name)
        }
      }
      this.isIndeterminate = false
    },
    handleCheckedFieldsChange(val) {
      let checkedCount = val.length
      this.checkAll = checkedCount === this.nameTableData.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.nameTableData.length
    }
  },
  created: function () {
    this.allStatus = this.$route.query.allStatus
    this.axios.get('/pmph/action/knowledgeLib/selectKnowledgeLibFieldName', {
      params: {
        id: this.$route.query.id,
      }
    }).then((response) => {
      this.nameTableData = response.data
    }).catch((error) => {
      console.error(error);
      this.nameTableData = [];
      this.noData = true;
      this.$message.error("未能请求到数据");
    })
  }
}
</script>

<style scoped>
.row {
  margin-top: 10px;
}

.label {
  line-height: 32px;
}
</style>
